<template>
	<view class="page">
			<view class="infoBox">
				<view class="border">
					<view class="">
						<view class="title">
							第 {{detailObj.term_number}} 期
						</view>
						<view style="text-align: center;" v-if="arr.length && arr[0].status == 0">
							未开奖
						</view>
						<text  v-if="arr.length && arr[0].status != 0">开奖时间：{{detailObj.update_time_text}} </text>
					</view>
				</view>
			</view>
		
			<view class="arr"  >
				<view class="arrItem" v-for="(item,index) in arr" :key="index">
					<image :src="item.headimg" mode=""></image>
					<view class="desc">
						<view class="name">
							{{item.nickname}}<view class="symbol" v-if="item.prize_status_text=='拆中'">拆中</view >
						</view>
						<view class="time">
							参与时间：{{item.create_time_text}}
						</view>
					</view>
					<view class="money" >
						{{item.prize_status_text != '拆中' ? item.prize_status_text : ''}}
					</view>
				</view>
				<view class="noMore">
					没有更多了
				</view>
			</view>
			
	
	</view>
</template>

<script>
	// import noMre from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				term_id: '',
				detailObj:{},
				mid : uni.getStorageSync('mid'),
				arr:[],
			};
		},
		components:{
		},
		onLoad({term_id}) {
			if(term_id){
				this.term_id = term_id
				this.getDetail()
			}
			
			
		},
		methods:{
			
			getDetail(){
				this.myHttp({
					url: '/surpriseblindbox/api/Blindbox/termDetail',
					data:{
						term_id : this.term_id
					}
				}).then((res)=>{
					this.detailObj = res.data.info
					this.arr = res.data.member_list
				})
			},
		
			
			
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
	
	
.page{
	font-family: PingFang SC;
	background-color: #FB1E11;
	width: 100%;
	height: 92vh;
	@include flexCol;
	align-items: center;
	.infoBox{
		margin-top: 30rpx;
		width: 674rpx;
		height: 242rpx;
		background: linear-gradient(156deg, #F4D9B3, #FFEED4);
		border-radius: 20rpx;
		padding: 24rpx 32rpx;
		@include flexCenter;
		.border{
			width: 100%;
			height: 100%;
			border: 2rpx solid #CFA972;
			border-radius: 20rpx;
			@include flexCenter;
			color: #A47838;
			&::after{
				content: '';
				position: absolute;
				right: 4%;
				width: 21rpx;
				height: 21rpx;
				background-color: $themeColor;
				border-radius: 50%;
			}
			&::before{
				content: '';
				position: absolute;
				left: 4%;
				width: 21rpx;
				height: 21rpx;
				background-color: $themeColor;
				border-radius: 50%;
			}
			.title{
				@include flexCenter;
				font-size: 40rpx;
				font-weight: 600;
				margin-bottom: 24rpx;
			}
			text{
				font-size: 24rpx;
			}
		}
	}
	
	.arr{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: 1135rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: -40rpx;
		padding: 0 25rpx;
		.arrItem{
			display: flex;
			align-items: center;
			height: 156rpx;
			width: 100%;
			border-bottom: 2rpx solid #eee;
			image{
				width: 79rpx;
				height: 79rpx;
				border-radius: 50%;
				margin-right: 29rpx;
			}
			.desc{
				font-size: 24rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.name{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #000;
					.symbol{
						margin-left: 10rpx;
						width: 62rpx;
						height: 31rpx;
						background: $themeColor;
						border-radius: 5rpx;
						font-size: 21rpx;
						color: #fff;
						display: grid;
						place-items: center;
					}
				}
				.time{
					margin-top: 10rpx;
					color: #A5A5A5;;
				}
				
			}
			.money{
				font-size: 30rpx;
				color: #CFA972;
			}
			
		}
		.noMore{
			margin-top: 30rpx;
			color: #A5A5A5;
		}
	}
}

</style>
